import React, { useEffect, useState } from 'react';
import { Space, Table, message, Button, Drawer, Form, Input, Tree, TreeSelect } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import type { DataNode } from 'antd/es/tree';
import service from "../../../api/index"
interface Props { }
interface DataType {
    key: string;
    name: string;
    adminname: string;
    age: number;
    address: string;
    tags: string[];
    adminid: string;
    role: number
}


function Users(props: Props) {
    const [form] = Form.useForm()
    const [list, setList] = useState([])
    const [keys, setKeys] = useState([]);
    const [isAdd, setIsAdd] = useState(true);



    let getList = () => {
        service.admin.admin_list().then((res) => {
            // console.log('管理员', res.data.data);
            if (res.data.code === '200') {
                setList(res.data.data);
            }
        })
    }


    //删除单个角色
    const delrole = (adminid: string) => {
        // console.log(adminid);
        service.admin.admin_delete({ adminid }).then((res) => {
            // console.log('delrols', res.data);
            if (res.data.code === '200') {
                message.success('删除成功')
                getList()
            } else {
                message.error('删除失败')
            }
        })

    }


    //使用生命周期
    useEffect(() => {
        getList()
    }, [])
    const columns: ColumnsType<DataType> = [
        {
            title: '序号',
            dataIndex: 'bannerid',
            key: 'bannerid',
            render: (_, record, index) => <div>{index + 1}</div>,
        },
        {
            title: '账号',
            dataIndex: 'img',
            key: 'img',
            render: (_, record) => (
                <Space size="middle">
                    {record.adminname}
                </Space>
            ),
            width: '300px'
        },
        {
            title: '权限',
            dataIndex: 'link',
            key: 'link',
            render: (_, record) => (
                <Space size="middle">
                    <div>{record.role === 1 ? '管理员' : '超级管理员'}</div>
                </Space>
            ),
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <Button danger type="primary" onClick={() => { editRole(record) }}>edit</Button>
                    <Button danger type="primary" onClick={() => { delrole(record.adminid) }}>del</Button>
                </Space>
            ),
        },
    ];


    //新增权限树形控件等
    const treeData: DataNode[] = [
        {
            title: '轮播图管理',
            key: '0-0',
            children: [
                { title: '轮播图列表', key: '0-0-0' },
                { title: '增加轮播图', key: '0-0-1' },

            ],
        },
        {
            title: '账号管理',
            key: '0-1',
            children: [
                { title: '管理员列表', key: '0-1-0' },
            ],
        },
        {
            title: '产品管理',
            key: '0-2',
            children: [
                { title: '产品列表', key: '0-2-0' },
                { title: '秒杀列表', key: '0-2-1' },
                { title: '推荐列表', key: '0-2-2' },
                { title: '筛选列表', key: '0-2-3' },
            ],
        },
        {
            title: '数据可视化',
            key: '0-3',
            children: [
                { title: 'echarts使用', key: '0-3-0' },
            ],
        },
        {
            title: '编辑器',
            key: '0-4',
            children: [
                { title: '富文本编辑器', key: '0-4-0' },
            ],
        },
        {
            title: 'excel管理',
            key: '0-5',
            children: [
                { title: 'excel导入', key: '0-5-0' },
                { title: 'excel导出', key: '0-5-1' },
            ],
        },
        {
            title: '地图管理',
            key: '0-6',
            children: [
                { title: '百度地图', key: '0-6-0' },
            ],
        },
    ];
    //勾选树状框
    const onCheck = (checkedKeys: any) => {
        form.setFieldValue('checkedKeys', checkedKeys);
        // console.log('树状勾选',checkedKeys);
        setKeys(checkedKeys)
    };
    //新增角色
    const [value, setValue] = useState<string>();
    const role = [
        {
            value: 1,
            title: '管理员',
        },
        {
            value: 2,
            title: '超级管理员',
        },
    ];
    //编辑等
    const editRole = async (record: any) => {
        setIsAdd(false)
        form.setFieldsValue(record)
        setKeys(record.checkedKeys)
        setOpen(true);
    }
    ////////表单最终项回调
    const onFinish = async (values: any) => {
        console.log('新增角色表单:', values);
        if (isAdd) {
            let addres = await service.admin.admin_add(values)
            console.log('新增返回数据', addres.data);
            if (addres.data.code === '200') {
                message.success('新增成功')
                setOpen(false);
                getList()
            } else {
                message.error('新增失败')
                setOpen(false);
            }
        } else {
            let res = await service.admin.admin_detail({ values })
            console.log('编辑返回数据', res.data);
            if (res.data.code === '200') {
                message.success('编辑成功')
                setOpen(false);
                getList()
            } else {
                message.error('编辑失败')
                setOpen(false);
            }
        }

    };

    const onChange = (newValue: string) => {
        console.log(newValue);

        setValue(newValue);
    };

    //遮罩层显示等
    const [open, setOpen] = useState(false);
    //新增弹出
    const showDrawer = () => {
        setIsAdd(true)
        setOpen(true);
    };
    //关闭同时清空值
    const onClose = () => {
        setKeys([])
        form.setFieldsValue({ adminid: '', adminname: '', role: '', password: '' })

        setOpen(false);

    };
    return (
        <div>
            <div>
                <Button type="primary" onClick={showDrawer}>
                    添加管理员
                </Button>
            </div>
            <Drawer title={isAdd ? "新增角色" : '编辑角色'} placement="right" onClose={onClose} open={open}>
                <Form onFinish={onFinish} form={form}>
                    <Form.Item
                        label="账号"
                        name="adminname"

                        rules={[{ required: true, message: '请输入正确的账号!' }]}
                    >
                        <Input  disabled={isAdd ? false : true} />
                    </Form.Item>

                    <Form.Item
                        label="密码"
                        name="password"
                        rules={[{ required: true, message: '请输入正确的密码!' }]}
                    >
                        <Input.Password disabled={isAdd ? false : true} />
                    </Form.Item>
                    <Form.Item
                        label="角色"
                        name="role"
                        rules={[{ required: true, message: '请选择角色!' }]}
                    >
                        <TreeSelect
                            showSearch
                            style={{ width: '100%' }}
                            value={value}
                            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                            placeholder="请选择角色"
                            allowClear
                            treeDefaultExpandAll
                            onChange={onChange}
                            treeData={role}
                        />
                    </Form.Item>
                    <Form.Item
                        label="权限"
                        name="checkedKeys"
                        rules={[{ required: true, message: '请选择权限' }]}
                    >
                        <Tree
                            checkable
                            onCheck={onCheck}
                            treeData={treeData}
                            checkedKeys={keys}
                        />
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit" >
                            {isAdd ? "新增角色" : '编辑角色'}
                        </Button>
                    </Form.Item>
                </Form>
            </Drawer>
            <div>
                <Table columns={columns} dataSource={list} rowKey='adminid' />
            </div>
        </div>
    );
}

export default Users;